import { useMemo, useState } from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { Button, Card, NavBar, List, Checkbox, Tag, Toast } from "antd-mobile";
import { SubmitBar } from "react-vant";
import { useSelector, useDispatch } from "react-redux";
import { stateChange } from "../../store/TickPersonSlice";
import MyTickInfo from "../../components/MyTickInfo";
import styles from "./index.module.css";

const Index = () => {
  const [sq] = useSearchParams();
  const price = sq.get("price");
  const levelseat = sq.get("levelseat");
  // 拿到上一个页面的数据,作为订单的数据
  const { state } = useLocation();
  const navigate = useNavigate();
  //获取仓库上的乘车人数据
  const { tickPersonList } = useSelector((state) => state.TickPersonSlice);
  const dispatch = useDispatch();

  const [sitPos, setSitPos] = useState([]);
  //获取选中的乘车人数据
  const selectedPerlist = useMemo(() => {
    return tickPersonList.filter((item) => item.state);
  }, [tickPersonList]);

  //根据乘车人数量渲染坐席
  const sitList = useMemo(() => {
    switch (selectedPerlist.length) {
      case 1:
        return [["A", "B", "C", "D", "E"]];
      case 2:
        return [
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
        ];
      case 3:
        return [
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
          ["A", "B", "C", "D", "E"],
        ];
      default:
        return [];
    }
  });

  //获取最后选择的坐席位置
  const posList = useMemo(() => {
    //从后往前取，选择了几个人就取几个位置
    return sitPos.slice(-sitList.length);
  }, [sitList, sitPos]);

  //点击坐席，获取位置
  const handelGetPos = (row, ind) => {
    //row 具体的行  ind 具体的列
    setSitPos([...sitPos, { row, ind }]);
  };

  const allPrice = selectedPerlist.length * price;
  const handelSubmit = () => {
    if (selectedPerlist.length !== 0) {
      if (selectedPerlist.length !== sitPos.length)
        return Toast.show({ content: "请选择坐席", icon: "fail" });
    } else {
      return Toast.show({ content: "请选择乘车人", icon: "fail" });
    }

    navigate(`/orderconfirm?price=${allPrice}&levelseat=${levelseat}`, {
      state: state,
    });
  };

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>车次订单</NavBar>
      <Card>
        <h3 className={styles.or_title}>
          <span>{levelseat}</span>
          <span>¥{price}</span>
        </h3>
      </Card>
      <MyTickInfo data={state}></MyTickInfo>
      {/* 乘车相关的业务 */}
      <div className={styles.person_wrap}>
        <Button size="mini" onClick={() => navigate("/addtickperson")}>
          选择乘车人
        </Button>
        <Card>
          <List>
            {selectedPerlist.map((item, ind) => (
              <List.Item
                key={ind}
                description={item.code}
                extra={
                  <div>
                    <Checkbox
                      checked={item.state}
                      onChange={() => {
                        dispatch(stateChange(item));
                      }}
                    />
                  </div>
                }
              >
                {item.name}
              </List.Item>
            ))}
          </List>
        </Card>

        <div>
          {selectedPerlist.length > 0 && (
            <Card title="选择坐席：">
              {sitList.map((item, row) => (
                <div key={row} className={styles.sitItem}>
                  {item.map((it, ind) => (
                    <Tag
                      key={ind}
                      color={
                        posList.some(
                          (item) => item.row === row && item.ind === ind
                        )
                          ? "primary"
                          : "default"
                      }
                      onClick={() => handelGetPos(row, ind)}
                    >
                      {it}
                    </Tag>
                  ))}
                </div>
              ))}
            </Card>
          )}
        </div>
      </div>

      {/* 提交订单 */}
      <SubmitBar
        price={allPrice * 100}
        buttonText="提交订单"
        onSubmit={() => handelSubmit()}
      />
    </div>
  );
};

export default Index;
